
<template>
  <div :style="{height:wheight+'px'}">
    <el-menu class="el-menu-vertical-demo"
             ref="emenu"
             @open="handleOpen"
             @close="handleClose"
             :collapse="isCollapse"
             background-color="#545c64"
             text-color="#FFFFFF"
             active-text-color="#ffd04b"
             :style="{height:wheight+'px'}">
      <button @click="dianji">开/关</button>

      <el-submenu :title="m1.menuName" v-for="(m1,mindex) in listMenu" :key="mindex" :index="getIndex(m1.code)" @click="topush(m1.url)">
        <template slot="title">
          <i v-if="" :class="m1.imagePath"></i>
          <span slot="title">{{m1.menuName}}</span>
        </template>

        <el-submenu v-for="(m2,m2Index) in m1.listMenu" :key="m2Index" :index="getIndex(m2.code)" @click="topush(m2.url)">
          <span slot="title">{{m2.menuName}}</span>
          <el-menu-item v-for="(m3,m3Index) in m2.listMenu" :key="m3Index" :index="getIndex(m3.code)" @click="topush(m3.url)">{{m3.menuName}}</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
    export default {
        name: "left-menu",
        data() {
            return {
                wheight:window.innerHeight-60,
                isCollapse: true,
                listMenu: [],
                userId: this.$store.state.userId
            };
        },
        created(){
            this.getMenu();
        },
        methods: {
            getMenu(){

                let userId=(window.localStorage.getItem("userInfo"));
                console.log("userId"+userId)
                this.$axios.get(this.$gloableData.serverPath+"user/auth/getAuthMenu",{
                    params:{loginName:userId}
                }).then((response)=>{
                    //存储菜单信息
                    // this.$data.listMenu=response.data.result;
                    console.log(response.data.result);
                    this.listMenu=response.data.result;
                }).catch((error)=>{
                    console.log("菜单错误=》"+JSON.stringify(error))
                })
            },

            dianji(){
                if(this.$data.isCollapse){
                    this.$data.isCollapse=false
                }else{
                    this.$data.isCollapse=true
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            topush(path){
                //跳转路由
                this.$router.push(path)
            },
            getIndex(index){
                return ""+index.toString();
            },
            openClose(){
                if(this.$refs.emenu.collapse){
                    this.$data.isCollapse=false;
                    //调用父组件的方法，更改变量值
                    this.$emit("ee",false)

                }else{
                    this.$data.isCollapse=true;
                    //调用父组件的方法，更改变量值
                    this.$emit("ee",true)

                }
            }
        },
        mounted() {

        },
        activated() {
            let userId=(window.localStorage.getItem("userInfo"));
            console.log("userId"+userId)
            this.axios.get(this.$gloableData.serverPath+"/user/auth/getAuthMenu",{loginName:userId}).then((response)=>{
                //存储菜单信息
                // this.$data.listMenu=response.data.result;
                alert(response.data)
            }).catch((error)=>{
                console.log("菜单错误=》"+JSON.stringify(error))
            })




        }
    }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

